<style scoped>
.alarm-detail-item {
  margin: 10px;
}
.group-detail-item {
  line-height: 30px;
}
.ivu-modal-body {
  background-color: #efefef !important;
}
</style>

<template>
  <div>
    <Modal v-model="IsModalShow"
           :title="modalFormTitle"
           :mask-closable="false"
           @on-cancel="cancel"
           width="1200">
      <Row>
        <Col span="16"
             style="padding-right:20px">
        <Row style="padding-bottom:20px">
          <Card>
            <p slot="title">
              <Icon type="ios-bell"></Icon>告警详情
            </p>
            <div style="padding:10px 0;">
              <span class="alarm-detail-item">
                告警类别：
                <span :style="{'color': alarmTypeColor}">{{alarmTypeTxt}}</span>
              </span>
              <span class="alarm-detail-item">告警时间:{{modalForm.alarmTime}}</span>
              <span class="alarm-detail-item">告警内容:{{modalForm.alarmDetail}}</span>
              <span class="alarm-detail-item">
                告警状态：
                <span :style="{'color':alarmStatColor}">{{alarmStatTxt}}</span>
              </span>
            </div>
          </Card>
        </Row>
        <Row>
          <Card>
            <p slot="title">
              <Icon type="ios-compose"></Icon>告警处理
            </p>
            <div>
              <Form ref="modalForm"
                    :model="modalForm"
                    :label-width="80"
                    value="true"
                    style="padding: 3px 10px">
                <Form-item label="辅助功能"
                           prop="managerMobile">
                  <Button type="success"
                          @click="deviceXY">消音</Button>
                </Form-item>
                <Form-item label="确认类型"
                           prop="dealType"
                           :rules="{required: true, type: 'number',message: '必选',trigger:'blur'}">
                  <RadioGroup v-model="modalForm.dealType">
                    <Radio v-for="item in dealTypeCombo"
                           :key="item.key"
                           :label="item.key"
                           :disabled="modalForm.alarmStat==2&&modalForm.dealMethod!=item.key">{{item.value}}</Radio>
                  </RadioGroup>
                </Form-item>
                <Form-item label="确认方式"
                           prop="dealMethod"
                           :rules="{required: true, type: 'number',message: '必选', trigger:'blur'}">
                  <RadioGroup v-model="modalForm.dealMethod">
                    <Radio v-for="item in dealMethodCombo"
                           :key="item.key"
                           :label="item.key"
                           :disabled="modalForm.alarmStat==2&&modalForm.dealMethod!=item.key">{{item.value}}</Radio>
                  </RadioGroup>
                </Form-item>
                <Form-item label="火灾原因"
                           prop="alarmReason"
                           v-show="modalForm.alarmType==2&&modalForm.dealType==1">
                  <Select v-model="modalForm.alarmReason"
                          style="width:200px">
                    <Option v-for="item in reasonList"
                            :value="item.value"
                            :key="item.value">{{ item.label }}</Option>
                  </Select>
                </Form-item>
                <Form-item label="处理结果">
                  <Input v-model="modalForm.dealResult"
                         :disabled="modalForm.alarmStat==2"></Input>
                </Form-item>
              </Form>
            </div>
          </Card>
        </Row>
        </Col>
        <Col span="8">
        <Card style="height:409px;">
          <p slot="title">商铺信息</p>
          <div>
            <Row class="group-detail-item">
              <Col span="7">商铺名称:</Col>
              <Col span="17">{{modalForm.shopName}}</Col>
            </Row>
            <Row class="group-detail-item">
              <Col span="7">主要联系人:</Col>
              <Col span="17">{{modalForm.managerName}}</Col>
            </Row>
            <Row class="group-detail-item">
              <Col span="7">手机号:</Col>
              <Col span="17">{{modalForm.managerMobile}}</Col>
            </Row>
          </div>
          <Row style="height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #1c2438;
    font-weight: 700;margin:20px 0 5px;">
            <Col span="7">设备信息</Col>
            <Col span="17">
            </Col>
          </Row>
          <div>
            <Row class="group-detail-item">
              <Col span="7">设备名称:</Col>
              <Col span="17">{{modalForm.devName}}</Col>
            </Row>
            <Row class="group-detail-item">
              <Col span="7">IMEI:</Col>
              <Col span="17">{{modalForm.imei}}</Col>
            </Row>
            <Row class="group-detail-item">
              <Col span="7">安装地址:</Col>
              <Col span="17">{{modalForm.installAddr}}</Col>
            </Row>
          </div>
        </Card>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="warning"
                @click="cancel">关闭</Button>
        <Button v-if="modalForm.alarmStat==1"
                type="primary"
                :loading="modalForm_loading"
                @click="saveForm('modalForm')">确认告警</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { dealAlarm, alarmXY } from '@/api/monitor'
import { getAlarmReason } from '@/libs/smoketool.js'
export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {
          id: '',
          devId: '',
          dealType: '',
          dealMethod: '',
          dealResult: ''
        }
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      dealTypeCombo: [
        { key: 1, value: '真实火警' },
        { key: 2, value: '误报' },
        { key: 3, value: '故障' },
        { key: 4, value: '测试' },
        { key: 5, value: '离线' },
        { key: 6, value: '传感器故障' },
        { key: 7, value: '拆除告警' },
        { key: 8, value: '低压告警' }
      ],
      dealMethodCombo: [
        { key: 1, value: '电话确认' },
        { key: 2, value: '视频确认' },
        { key: 3, value: 'app图片确认' },
        { key: 4, value: '自动确认' },
        { key: 6, value: '当面确认' },
        { key: 5, value: '其他方式' }
      ],
      alarmTypeCombo: [
        { key: 0, value: '告警类型' },
        { key: 1, value: '离线' },
        { key: 2, value: '火警' },
        { key: 3, value: '传感器故障' },
        { key: 4, value: '拆除告警' },
        { key: 5, value: '低压告警' },
        { key: 6, value: '火警解除' },
        { key: 99, value: '未知' }
      ],
      alarmTypeColorList: [
        { key: 0, value: '#495060' },
        { key: 1, value: '#f16700' },
        { key: 2, value: '#e4393c' },
        { key: 3, value: '#00b711' },
        { key: 4, value: '#d3adf7' },
        { key: 5, value: '#495060' }
      ],
      alarmStatCombo: [
        { key: 0, value: '确认状态' },
        { key: 1, value: '未确认' },
        { key: 2, value: '已确认' }
      ],
      alarmStatColorList: [
        { key: 1, value: '#f54d50' },
        { key: 2, value: '#5cb85c' }
      ],
      reasonList: [
        {
          value: '1',
          label: '明火走火'
        },
        {
          value: '2',
          label: '漏电'
        },
        {
          value: '3',
          label: '自燃'
        },
        {
          value: '4',
          label: '人为纵火'
        },
        {
          value: '5',
          label: '易燃易爆物品燃爆'
        },
        {
          value: '6',
          label: '用电负荷超载'
        },
        {
          value: '7',
          label: '雷击'
        },
        {
          value: '8',
          label: '生活用火不慎'
        },
        {
          value: '9',
          label: '生产作业不慎'
        }
      ]
    }
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.modalForm = Object.assign(this.parentForm)
      this.IsModalShow = curVal
    }
  },
  computed: {
    alarmStatTxt: function() {
      if (this.modalForm.alarmStat) {
        let alarmStat = this.modalForm.alarmStat
        return this.alarmStatCombo.find(a => a.key == alarmStat).value
      } else {
        return ''
      }
    },
    alarmStatColor: function() {
      if (this.modalForm.alarmStat) {
        let alarmStat = this.modalForm.alarmStat
        return this.alarmStatColorList.find(a => a.key == alarmStat).value
      } else {
        return '#666'
      }
    },
    alarmTypeTxt: function() {
      if (this.modalForm.alarmStat) {
        let alarmType = this.modalForm.alarmType
        return this.alarmTypeCombo.find(a => a.key == alarmType).value
      } else {
        return ''
      }
    },
    alarmTypeColor: function() {
      if (this.modalForm.alarmStat) {
        let alarmType = this.modalForm.alarmType
        return this.alarmTypeColorList.find(a => a.key == alarmType).value
      } else {
        return '#666'
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit('listenModalForm')
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true
          let params = Object.assign(this.modalForm)
          params.alarmTime = params.alarmTime
          params.alarmStat = 2 //表示确认
          try {
            let result = await dealAlarm(params)
            if (result.code == 0) {
              this.$Message.success('提交成功')
              this.$emit('listenModalForm')
              this.$emit('refreshTableList')
            }
          } catch (err) {
            console.log(err)
            this.$Message.error('服务器异常，稍后再试')
          }
          this.modalForm_loading = false
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    async deviceXY() {
      let result = await alarmXY({ deviceId: this.parentForm.devId })
      if (result.code == '0') {
        this.$Message.success('消音成功。')
      } else {
        this.$Message.error('消音失败。')
      }
    }
  }
}
</script>
